<template>
  <div class="editItem">
    <el-dialog
      title="修改项目"
      :visible.sync="editDialogVisible"
      width="40%"
      :center="true"
      :before-close="editItemCancel"
    >
      <el-form
        label-width="140px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="所属业务线">
          <template>
            <div>{{ editForm.businessName }}</div>
          </template>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input
            placeholder="请输入"
            v-model="editForm.projectName"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input
            v-model="editForm.describe"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="上班打卡时间" prop="officeHours">
          <el-time-picker
            v-model="editForm.officeHours"
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            placeholder="请选择时间(时分)"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="下班打卡时间" prop="closingTime">
          <el-time-picker
            v-model="editForm.closingTime"
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            placeholder="请选择时间(时分)"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editItemCancel">取 消</el-button>
        <el-button type="primary" @click="editItem">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "EditItem",
  props: ["editDialogVisible", "editForm"],
  data() {
    return {
      value1: "",
      value2: "",
      itemList: {
        projectName: "",
        describe: "",
        officeHours: "",
        closingTime: "",
      },
      //           项目名称       项目描述         上班时间    下班时间
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        officeHours: [
          { required: true, message: "请输入上班时间", trigger: "blur" },
        ],
        closingTime: [
          { required: true, message: "请输入下班时间", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 取消新增按钮
    editItemCancel() {
      this.$emit("editItemCancel", false);
      this.$message("已取消修改");
    },
    // 确认新增按钮
    editItem() {
      if (
        this.editForm.projectName == "" ||
        this.editForm.officeHours == "" ||
        this.editForm.closingTime == ""
      ) {
        this.$message({
          message: "请填写必填项",
          type: "warning",
        });
      } else {
        this.$emit("editItem", this.itemList, false);
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
